<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>智能居家环境监控</title>
    <link rel="stylesheet" href="./dis/css/slucky.css">
    <script src="./dis/plug/socket.io.js"></script>
</head>
<style>
.main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: url(./dis/static/images/temp_06.jpg) no-repeat center;
    background-size: cover;
}

.main-mark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
}

.main-content {
    position: relative;
    background: rgba(255, 255, 255, .9)
}
</style>

<body>
    <div class="main-container">
        <div class="main-mark"></div>
        <div class="main-content paper p16">
            <div class="ta-c">
                <p>环境监控中</p>
            </div>
            <p>湿度：<span id="hum"></span> %</p>
            <p>温度：<span id="tem"></span> ℃</p>
            <p>有害气体指标：<span id="gas"></span></p>
            <p>火情：<span id="flame"></span></p>
            <div class="ta-c">
                <img src="./dis/static/images/waiting.gif" alt="">
            </div>
        </div>
    </div>
    <script>
    $ = function(id) {
        return document.getElementById(id)
    }

    function fetchData() {
        xhr.open('GET', "http://www.brandf.cn:801/java", true);
        xhr.send()
    }
    var hum = $('hum')
    var tem = $('tem')
    var gas = $('gas')
    var flame = $('flame')
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                console.log(xhr.responseText)
                    // container.innerText = xhr.responseText
                var data = JSON.parse(xhr.responseText)
                hum.innerText = data.hum
                tem.innerText = data.tem
                gas.innerText = data.gas
                if (data.flame=='false') {
                    flame.innerText = "安全"
                } else flame.innerText = "有险情发生，请及时确认"
            } else {
                console.log(xhr.status)
            }
        }
    }
    fetchData()
    var timer = setInterval(function() {
        fetchData()
    }, 5000);

    var socket = io.connect('http://www.brandf.cn:801/');

    socket.on('news', function(data) {
        console.log(data);
        socket.emit('hello', {
            msg: 'accept success'
        });
    });
    </script>
</body>

</html>
